<template>
    <div>
        <div @click="openEdit">
            <header_moban_1 :title="row.title"></header_moban_1>

            <div class="resume_content_main f-14">
                <div
                    class="ql-editor"
                    style="font-size: 13px; line-height: 22px"
                    data-v-1176a4bc=""
                >
                    <p v-for="(item, index) in row.list" :key="index">
                        <b>{{ item.label }}：</b>{{ item.value }}
                    </p>
                </div>

                <div class="grid-clumn-2 m-t-10">
                    <div v-for="(item, index) in row.progress_list" :key="index">
                        <div class="h-20 l-h-20">{{ item.label }}</div>

                        <div :class="['flex-center-wrap show-text']">
                            <el-progress
                                class="flex-1"
                                :percentage="item.percentage"
                            ></el-progress>
                            <div class="progress-text h-20 l-h-20">{{ getText(item) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            auto
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
            @confirm="confirm"
        >
            <template slot="list">
                <div class="d-main flex-wrap p-b-20 p-t-10 m-t-10">
                    上级模块：<el-button type="primary" v-if="!formData.list.length" @click="add1"
                        >+add</el-button
                    >
                </div>
                <div
                    :class="['flex-wrap', index === 0 ? '' : 'm-t-20']"
                    v-for="(item, index) in formData.list"
                    :key="index"
                >
                    <el-input class="w-300" v-model="item.label" :maxlength="100"></el-input
                    >：<el-input v-model="item.value" :maxlength="200"></el-input>
                    <el-button class="m-l-20" type="primary" @click="add1(index)">+add</el-button>
                    <el-button class="m-l-10" type="danger" @click="del1(index)">+del</el-button>
                </div>
                <div class="line m-t-20"></div>
                <div class="flex-wrap m-t-20">
                    下级进度模块：<el-button
                        @click="add2"
                        type="primary"
                        v-if="!formData.progress_list.length"
                        >+add</el-button
                    >
                </div>
                <div
                    class="grid-list m-t-20"
                    v-for="(item, index) in formData.progress_list"
                    :key="index"
                >
                    <div class="flex-center-wrap">
                        <div class="flex-0">左侧文案：</div>
                        <el-input v-model="item.label" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-center-wrap">
                        <div class="flex-0">进度：</div>
                        <el-input v-model="item.percentage" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-center-wrap">
                        <div class="flex-0">右侧描述：</div>
                        <el-input v-model="item.text" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-wrap">
                        <el-button class="m-l-20" type="primary" @click="add2(index)"
                            >+add</el-button
                        >
                        <el-button class="m-l-10" type="danger" @click="del2(index)"
                            >+del</el-button
                        >
                    </div>
                </div>
            </template>
        </DialogForm>
    </div>
</template>

<script>
export default {
    components: {
        header_moban_1: () => import('@/components/bn/headerPages/moban_1.vue'),
    },
    props: {
        row: {
            type: Object,
            default() {
                return {}
            },
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            visable: false,
            formConfig: [
                {
                    label: '模块名',
                    type: 'input',
                    modelName: 'title',
                    className: 'w-300',
                },
                {
                    label: '内容区',
                    type: 'customInput',
                    slot: 'list',
                },
            ],
            formData: {
                list: [],
            },
            rules: {
                title: [{ required: true, message: '请输入模块名字', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                title: '其他技能',
                list: [
                    {
                        label: '语言能力',
                        value: '大学英语6级证书，荣获全国大学生英语竞赛一等奖，能够熟练的进行交流、读写。',
                    },
                    {
                        label: '计算机',
                        value: '计算机二级证书，熟练操作windows平台上的各类应用软件，如Word、Excel。',
                    },
                    {
                        label: '团队能力',
                        value: '具有丰富的团队组建与扩充经验和项目管理与协调经验。',
                    },
                ],
                progress_list: [
                    {
                        label: '计算机',
                        percentage: '100',
                        text: '精通',
                    },
                    {
                        label: '英语',
                        percentage: '60',
                        text: '熟练',
                    },
                ],
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }

        }
        this.$emit('loadSuccess',{
            row_code:this.row.row_code
        })
    },
    methods: {
        openEdit() {
            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
        editorChange({ str, html }) {
            Object.assign(this.formData, {
                str,
                html,
            })
        },
        add1(index) {
            const obj = {
                label: '',
                value: '',
            }
            if (Array.isArray(this.formData.list)) {
                index !== undefined
                    ? this.formData.list.splice(index + 1, 0, obj)
                    : this.formData.list.push(obj)
            } else {
                this.$set(this.formData, 'list', [obj])
            }
        },
        del1(index) {
            this.formData.list.splice(index, 1)
        },
        add2(index) {
            const obj = {
                label: '',
                percentage: '',
                text: '',
            }
            if (Array.isArray(this.formData.progress_list)) {
                index !== undefined
                    ? this.formData.progress_list.splice(index + 1, 0, obj)
                    : this.formData.progress_list.push(obj)
            } else {
                this.$set(this.formData, 'progress_list', [obj])
            }
        },
        del2(index) {
            this.formData.progress_list.splice(index, 1)
        },
        getText({text,percentage}){
            return text?text:`${percentage}%`
        }
    },
}
</script>

<style lang="scss" scoped>
.grid-clumn-2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
}
.resume_content_main {
    padding: 14px 20px;
}

.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 10px;
}
.show-text ::v-deep{
    .el-progress__text{
        display: none;
    }
    .el-progress-bar{
        padding-right: 10px;
    }
}
.h-14{
    height: 14px;
}
</style>
